<!--
 * @Author: ckk
 * @Date: 2023-01-06 17:32:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-11-08 17:09:21
 * @Description: 年级选择页面
 * @version: 1.0
-->
<template>
  <div class="grade-change">
    <div class="grade-nav">
      <yj-mob-icon name="cross" color="#999" size="24" class="icon" v-show="false" @click="goBack()" />
      <p>选择年级</p>
    </div>
    <div class="grade-content">
      <div class="grade-item" v-for="(item, index) in gradeList" :key="index">
        <p>{{  item.stageName  }}:</p>
        <div class="grade-list">
          <div @click="chackGrade(item1.gradeCode, item.stageCode)"
            :class="active === item1.gradeCode ? 'grade-option active' : 'grade-option'" v-for="item1 in item.gradeList"
            :key="item1.gradeCode">{{  item1.gradeName  }}</div>
        </div>
      </div>
    </div>
    <div class="grade-bottom">
      <button class="submit-btn" @click="save()" v-if="active !== ''">完成</button>
      <button class="submit-btn disable-btn" v-if="active === ''">完成</button>
      <p class="educational-system" @click="checkSystem()">{{  !system ? '切换至五四制年级' : '切换至六三制年级'  }}</p>
    </div>
  </div>
</template>

<script>
import { Icon, Toast } from 'yj-mob-ui';
import { userServices } from '@/api';
import { accessReauth } from '../../api/attestationApi';
import { getLink, getParam } from '../../common/comfun';
export default {
  name: 'gradeChange',
  components: {
    [Icon.name]: Icon,
    [Toast.name]: Toast
  },
  data () {
    return {
      active: '',
      studyStageCode: '',
      system: false,
      gradeList: [],
      weixinData: {}
    };
  },
  created () {
    this.system = this.$route.query.eduYears !== '63';
    this.getGradeList().then(() => {
      this.active = this.$route.query.gradeCode;
    });
    this.weixinData = JSON.parse(localStorage.getItem('weixinData'));
  },
  methods: {
    goBack () {
      console.log(1);
      this.$router.go(-1);
    },
    // 保存选中的年级
    async save () {
      console.log(this.active, 'ppp');
      if (!this.active) {
        this.$toast('请选择年级');
        return;
      }
      const saveParams = {
        eduYears: this.system ? '54' : '63',
        studyStageCode: this.studyStageCode,
        gradeCode: this.active,
        termCode: '',
        subjectCode: ''
      },
        saveRes = await userServices.setGrade(saveParams);
      if (saveRes.code === '200') {
        this.$toast('设置成功');
        localStorage.setItem('gradeCode', this.active);
        localStorage.setItem('studyStageCode', this.studyStageCode);
        setTimeout(async () => {
          // await this.ReCertification();
          if (this.$route.query.type) {
            var tabBar = JSON.parse(localStorage.getItem('tabBar'));
            tabBar.setStyle.iconList.forEach(item => {
              if (item.url.indexOf('layOut/Mine') > -1) {
                const linkList = getLink(item.url).split('&'),
                  params = getParam(getLink(item.url), 'cuparam');
                this.$router.replace({ path: linkList[0], query: params ? JSON.parse(params) : '' });
              }
            });
          } else {
            this.$router.replace({ name: 'home' });
          }
        }, 2000);
      }
    },
    // 重新鉴权
    async ReCertification () {
      // eslint-disable-next-line one-var
      const authToken = JSON.parse(decodeURIComponent(localStorage.getItem('auth_token')));
      if (authToken.access_token) {
        const res = await accessReauth({ access_token: authToken.access_token });
        if (res.access_token) {
          localStorage.setItem('auth_token', encodeURIComponent(JSON.stringify(res)));
          const loginTime = new Date().getTime();
          localStorage.setItem('auth_time', loginTime);
        }
      } else {
        return null;
      }
    },
    // 选择年级
    chackGrade (code, stageCode) {
      this.active = code;
      this.studyStageCode = stageCode;
    },
    // 切换学制
    checkSystem () {
      this.system = !this.system;
      this.getGradeList();
    },
    async getGradeList () {
      this.active = '';
      const query = {
        eduYears: this.system ? '54' : '63'
      },
        res = await userServices.getGrade(query);
      if (res.code === '200') {
        this.gradeList = res.data;
      }
    }
  }
};
</script>
<style scoped lang="scss">
.grade-change {
  display: flex;
  height: 100%;
  flex-direction: column;

  .grade-nav {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 14px 0;
    flex-shrink: 0;

    .icon {
      flex-shrink: 0;
      margin-left: 24px;
    }

    p {
      position: absolute;
      left: 0;
      top: 0;
      padding: 14px 0;
      font-size: 20px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #000000;
      text-align: center;
      width: 100%;
      z-index: -1
    }
  }

  .grade-content {
    padding: 0 24px;
    height: 100%;
  }

  .grade-item {
    p {
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC, sans-serif;
      font-weight: 800;
      color: #000000;
      margin-top: 13px;
    }

    .grade-list {
      display: flex;
      flex-wrap: wrap;
    }

    .grade-option {
      width: 96px;
      height: 36px;
      background: #FFFFFF;
      border-radius: 36px;
      opacity: 1;
      border: 1px solid #E4E4E4;
      line-height: 36px;
      text-align: center;
      font-size: 16px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      margin: 13px 5px 0px 5px;
      flex-shrink: 0;
    }

    .active {
      background: #52C17C;
      border: 1px solid #53C856;
      color: #FFFFFF;
    }
  }

  .grade-bottom {
    flex-shrink: 0;
    margin: 0 30px;
    padding-bottom: 52px;

    .submit-btn {
      height: 46px;
      line-height: 46px;
      background: #52C17C;
      border-radius: 42px;
      font-size: 18px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #FFFFFF;
      text-align: center;
      border: 0;
      width: 100%;
      margin-bottom: 16px;
    }

    .disable-btn {
      opacity: 0.5;
    }

    .educational-system {
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC, sans-serif;
      font-weight: 800;
      color: #52C17C;
      text-align: center;
    }
  }
}
</style>
